import { addTodo } from "@/app/redux/action";
import { createHomeStyles } from "@/assets/styles/home.styles";
import useTheme from "@/hooks/useTheme";
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import { useState } from "react";
import { TextInput, TouchableOpacity, View } from "react-native";
import { useDispatch } from "react-redux";

export default function Todoinput() {
    const { colors } = useTheme();
    const homeStyles = createHomeStyles(colors);
    const dispatch = useDispatch();

    const [todo, setTodo] = useState("");

    const handleAddTodo = () => {
        dispatch(addTodo(todo.trim()))
        setTodo("")
    }

    return (
        <View style={homeStyles.inputSection}>
            <View style={homeStyles.inputWrapper}>
                <TextInput
                    style={homeStyles.input}
                    placeholder="What need to be done today?"
                    value={todo}
                    onChangeText={setTodo}
                />
                <TouchableOpacity onPress={handleAddTodo} activeOpacity={0.8} disabled={!todo.trim()}>
                    <LinearGradient
                        colors={todo.trim() ? colors.gradients.primary : colors.gradients.muted}
                        style={[homeStyles.addButton, !todo.trim() && homeStyles.addButtonDisabled]}
                    >
                        <Ionicons name="add" size={24} color="#ffffff" />
                    </LinearGradient>
                </TouchableOpacity>
            </View>
        </View>
    )
}